<template>
  <div id="Specific">
    <tab class="isFixed" :line-width="2" active-color='#a30000' custom-bar-width="36px">
      <tab-item class="vux-center" v-for="item in tablist" :selected="item.name === '拍卖中'"
                @on-item-click="getShopList(item.type)" :key="item.type">{{item.name}}
      </tab-item>
    </tab>
    <!--拍品列表-->
    <div class="product-list">
      <div class="wrapperList">
        <div class="list" style="overflow: hidden;" v-if="status === 1">
          <div class="item" v-for="(item,index) in shopList" :key="index">
            <router-link :to="'/Detail/id/' + item.auction_id">
              <div class="img">
                <img :src="'./static/data/' + item.goods_thumb"/>
                <div class="time">
                  <count-down v-if="cache" :currentTime="item.currenttime" :startTime="item.auction_starttime"
                              :endTime="item.auction_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'" :endText="'已结束'"
                              :dayTxt="':'" :hourTxt="':'" :minutesTxt="':'" :secondsTxt="''">
                  </count-down>
                </div>
              </div>
              <div class="info">
                <p class="name">{{item.goods_name}}</p>
                <p class="price">当前价：<span>￥{{item.auction_bidprice}}</span></p>
              </div>
              <!--<span class="icon-auction">拍卖中</span>-->
            </router-link>
          </div>
        </div>
        <div class="list" style="overflow: hidden;" v-else>
          <div class="no-data">
            <img src="../../assets/images/home/nodata.png"/>
          </div>
        </div>
      </div>
    </div>
    <!--喜欢-->
    <loading :show="show1" :text="text"></loading>
    <toast v-model="success" type="text" width='2.8rem' is-show-mask>{{msg}}</toast>
    <toast v-model="cancel" type="text" width='5rem' is-show-mask>{{msg}}</toast>
  </div>
</template>

<script>
import top from '../comp/Header';
import bottom from '../comp/Footer';
import $ from 'jquery';
import CountDown from 'vue2-countdown';
import BScroll from 'better-scroll';
import axios from 'axios';
import { shopList } from '@/api/service'
import {
  Tabbar,
  InlineLoading,
  TabbarItem,
  ButtonTab,
  ButtonTabItem,
  Swiper,
  SwiperItem,
  Grid,
  GridItem,
  Flexbox,
  Toast,
  FlexboxItem,
  Popup,
  PopupHeader,
  Loading,
  Group,
  Tab,
  TabItem,
  Sticky,
  XHeader,
  ViewBox
} from 'vux';

export default {
  data() {
    return {
      category_name: '',
      show: false,
      show1: false,
      show2: false,
      percent: 1 / 4,
      cache: true,
      cancel: false,
      text: '加载中',
      concernText: '关注',
      success: false,
      msg: '',
      likes: '32',
      tablist: [{
        name: '预展中',
        type: '1'
      },
        {
          name: '拍卖中',
          type: '2'
        },
        {
          name: '已结束',
          type: '3'
        },
      ],
      listHeight: 0,
      hotSale: '',
      shopRec: [],
      shopList: [],
      status: '',
      flag: true,
      startTime: '',
      globals: ''
    }
  },
  components: {
    Tabbar,
    TabbarItem,
    Grid,
    GridItem,
    Swiper,
    SwiperItem,
    Flexbox,
    FlexboxItem,
    Popup,
    PopupHeader,
    Toast,
    Loading,
    Group,
    CountDown,
    BScroll,
    Tab,
    InlineLoading,
    TabItem,
    top,
    bottom,
    Sticky,
    ViewBox,
    XHeader
  },
  created() {
    this.getShopList(2);
    this.getTitleCate();
    this.listHeight = $('.product-list .list').outerHeight(true);
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == 'Detail') {
      from.meta.keepAlive = true;
      next();
    } else {
      from.meta.keepAlive = false;
      to.meta.keepAlive = false;
      this.$destroy();
      next();
    }
  },
  //方法
  methods: {
    //获取分类标题
    getTitleCate: function () {
      this.$http({
        method: 'GET',
        url: '/los/api/category/info.json',
        data: ''
      }).then((result) => {
        this.category_name = result.data.category_name
      }).catch((err) => {

      })
    },
    //获取带状态拍卖信息
    getShopList: function (index) {
      shopList().then(result => {
        this.shopList = result.rows
        this.status = result.code
      })
      // this.globals = index;
      // let _this = this;
      // let more = true;
      // let page = 1;
      // let category_id = this.$route.params.category_id;
      // this.$http({
      //   method: 'GET',
      //   url: '/los/api/index/auction_list.json?ts=' + index + '&category_id=' + category_id,
      //   data: ''
      // }).then((result) => {
      //   this.flag = true;
      //   this.status = result.data;
      //   this.shopList = result.data.data;
      //   this.cache = false;
      //   this.$nextTick(() => {
      //     this.shopList = result.data.data;
      //     this.cache = true;
      //   });
      // }).catch((err) => {
      //   console.log(err);
      // })

      $(window).scroll(function () {
        //获取网页的总高度
        var htmlHeight = $(document).height();
        //浏览器中的可视高度
        var clientHeight = $(window).height();
        var scrollTop = $(document).scrollTop();
        var overHeight = scrollTop + clientHeight;
        if (overHeight >= htmlHeight * 0.9) {
          if (more == true) {
            more = false;
            page += 1;
            if (_this.globals == index) {
              axios.get('/los/api/index/auction_list.json?ts=' + index + '&page=' + page + '&category_id=' + category_id).then(function (result) {
                $.each(result.data.data, function (index, val) {
                  _this.shopList.push(val);
                });
                more = true;
                if (result.data.code == 0) {
                  more = false;
                }
              }).catch(function (error) {
                console.log(error);
              });
            } else {
              return
            }

          }
        }
      })
    },
    back: function () {
      window.history.go(-1);
    },
  },
}
</script>

<style scoped>
  .isFixed {
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 0;
  }

  /*列表项*/

  .header {
    background: #fff;
  }

  .no-data {
    width: 2.96rem;
    height: 2.96rem;
    margin: 3rem auto 0;
  }

  .no-data img {
    width: 100%;
  }

  .product-list {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    margin-top: 1.17rem;
  }

  .product-list .list {
    width: 100%;
    padding: 0.26666rem;
    padding-left: 0.13333rem;
    background-color: #fff;
  }

  .product-list .list .item {
    position: relative;
    float: left;
    width: 50%;
    padding-left: 0.13333rem;
    margin-bottom: 0.26666rem;
  }

  .product-list .list .item .img {
    position: relative;
    font-size: 0;
  }

  .product-list .list .item .img img {
    width: 100%;
    height: 3.92rem;
    object-fit: cover;
  }

  .product-list .list .item .img .time {
    width: 100%;
    height: 0.66666rem;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 0.26666rem;
    font-size: 0.26666rem;
    color: #fff;
    line-height: 0.72rem;
    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.5));
  }

  .product-list .list .item .info {
    padding: 0.32rem 0.21333rem 0.34666rem;
    border-left: solid 1px #e6e6e6;
    border-right: solid 1px #e6e6e6;
    border-bottom: solid 1px #e6e6e6;
    height: 1.7rem;
  }

  .product-list .list .item .info .name {
    font-size: 0.34666rem;
    padding-bottom: 0.1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .product-list .list .item .info .price {
    color: #aaa;
    font-size: 0.29333rem;
  }

  .product-list .list .item .info .price span {
    color: #EB443C;
    font-size: 0.34666rem;
  }

  .product-list .list .item .icon-auction {
    position: absolute;
    top: 0;
    left: 0.3rem;
    padding: 0.05rem 0.1rem;
    color: #fff;
    font-size: 0.32rem;
    background-color: #db4342;
    border-bottom-left-radius: 0.05333rem;
    border-bottom-right-radius: 0.05333rem;
  }

  /*分享*/

  .share-list {
    background-color: #fff;
  }

  .share-list .body {
    padding: 0.56rem 0;
  }

  .share-list .body .vux-flexbox-item {
    text-align: center;
  }

  .share-list .body .name {
    margin-top: 0.26666rem;
    line-height: 1;
    font-size: 0.34666rem;
  }

  .share-list .body .first {
    margin-bottom: 0.53333rem;
  }

  .share-list .foot {
    padding: 0.46666rem 0;
    text-align: center;
  }

  /*悬浮按钮*/

  .button {
    position: fixed;
    right: 0.4rem;
    bottom: 2.37rem;
    z-index: 999;
  }

  .button img {
    width: 1.6rem;
    height: 1.6rem;
  }
</style>
<style>
  .product-list .item .count-down .endtxt,
  .product-list .item .count-down .starttxt,
  .product-list .item .count-down .tiptxt,
  .product-list .item .count-down .day,
  .product-list .item .count-down .hour,
  .product-list .item .count-down .minute,
  .product-list .item .count-down .seconds,
  .product-list .item .count-down i {
    font-size: 0.29333rem;
    display: inline-block;
  }

  .hotsale-list .item .count-down .endtxt,
  .hotsale-list .item .count-down .starttxt,
  .hotsale-list .item .count-down .tiptxt,
  .hotsale-list .item .count-down .day,
  .hotsale-list .item .count-down .hour,
  .hotsale-list .item .count-down .minute,
  .hotsale-list .item .count-down .seconds,
  .hotsale-list .item .count-down i {
    font-size: 0.34666rem;
    display: inline-block;
  }
</style>
